<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.*"%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" href="AmazeUI-2.4.2/assets/css/amazeui.min.css" />
    <link href="css/slide-unlock.css" rel="stylesheet">
    <link href="css/loginstyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script src="js/basevalue.js"></script>
    <script src="js/jquery.slideunlock.js"></script>
    <script src="js/register.js"></script>
<script type="text/javascript" src="basic/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <title>register</title>
</head>

<body>
    <div class="step">
        <ul id="status">
            <li id="step1" class="step-active">
                <i class="i-active">1</i>设置用户名
            </li>
            <li id="step2">
                <i>2</i>填写账号信息
            </li>
            <li id="step3">
                <i>3</i>注册成功
            </li>
        </ul>
    </div>
    <div id="content" class="register-con">
        <div id="part_1">
            <div class="user-res">
               <div class="user-res-label">手机号：</div>
               <div class="user-res-wrap">
                   <label for="user"><i class="am-icon-phone"></i></label>
                   <input type="email" name="username" id="phone" placeholder="请输入用户名">
                   <span id="phone_err" class="error"></span>
               </div> 
            </div>
            <div class="user-res">
               <div class="user-res-label">验证：</div>
               <div id="slider" class="user-res-wrap ">
                    <div id="slider_bg"></div>
                    <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
               </div>
            </div>
            <div class="user-res-next">
                <input type="submit" name="" id="next" value="下一步" class="am-btn am-btn-primary am-btn-sm am-fl">
            </div>
        </div> 

        
        <!-- display=none -->
        <div id="part_2" style="display:none">
          
           <div class="user-res">
               <div class="user-res-label">昵称：</div>
               <div class="user-res-wrap">
                   <label for="user"><i class="am-icon-user"></i></label>
                   <input type="email" name="nickname" placeholder="请输入昵称">
                   <span id="nick_msg" class="error"></span>
               </div> 
            </div>
            
            <div class="user-res">
               <div class="user-res-label">密码：</div>
               <div class="user-res-wrap">
                   <label for="user"><i class="am-icon-key"></i></label>
                   <input type="password" name="password1" placeholder="请输入密码">
                   <span id="pw1_msg" class="error"></span>
               </div> 
            </div>
            
            <div class="user-res">
               <div class="user-res-label">重复密码：</div>
               <div class="user-res-wrap">
                   <label for="user"><i class="am-icon-key"></i></label>
                   <input type="password" name="password2" placeholder="请输入密码">
                   <span id="pw2_msg" class="error"></span>
               </div> 
            </div>
            
            <div class="user-res">
               <div class="user-res-label">邮箱：</div>
               <div class="user-res-wrap">
                   <label for="user"><i class="am-icon-envelope"></i></label>
                   <input type="text" name="email" placeholder="请输入密码">
                   <span id="email_msg" class="error"></span>
               </div> 
            </div>
            
            <div class="user-res">
               <div class="user-res-label">性别：</div>
               <div class="user-res-radiowrap">
                   <input type="radio" name="sex" value="男"/><span>男</span>
                   <input type="radio" name="sex" value="女"/><span>女</span>
                   <span id="sex_msg" class="error"></span>
               </div> 
            </div>
            
            <div class="user-res">
               <div class="user-res-questiongroup">
                  <div class="user-res-label">密保问题1：</div>
                  <div class="user-res-wrap">
                     <label for="user"><i class="am-icon-question"></i></label>
                      <select id="ques1" name="ques1">
                          <option value="">请选择</option>
                      </select>
                      <span class="error"></span>
                  </div>
                  <div class="user-res-label">密保答案1：</div>
                  <div class="user-res-wrap">
                       <label for="user"><i class="am-icon-pencil-square-o"></i></label>
                       <input id="ans1" type="text" name="ans1" placeholder="请输入答案">
                       <span class="error"></span>
                  </div>
               </div>  
            </div>
            
            <div class="user-res">
               <div class="user-res-questiongroup">
                  <div class="user-res-label">密保问题2：</div>
                  <div class="user-res-wrap">
                     <label for="user"><i class="am-icon-question"></i></label>
                      <select id="ques2" name="ques2">
                          <option value="">请选择</option>
                      </select>
                      <span class="error"></span>
                  </div>
                  <div class="user-res-label">密保答案2：</div>
                  <div class="user-res-wrap">
                       <label for="user"><i class="am-icon-pencil-square-o"></i></label>
                       <input id="ans2" type="text" name="ans2" placeholder="请输入答案">
                       <span class="error"></span>
                  </div>
               </div>  
            </div>
            
            <div class="user-res">
               <div class="user-res-questiongroup">
                  <div class="user-res-label">密保问题3：</div>
                  <div class="user-res-wrap">
                     <label for="user"><i class="am-icon-question"></i></label>
                      <select id="ques3" name="ques3">
                          <option value="">请选择</option>
                      </select>
                      <span class="error"></span>
                  </div>
                  <div class="user-res-label">密保答案3：</div>
                  <div class="user-res-wrap">
                       <label for="user"><i class="am-icon-pencil-square-o"></i></label>
                       <input id="ans3" type="text" name="ans3" placeholder="请输入答案">
                       <span class="error"></span>
                  </div>
               </div>  
            </div>
            
            <div class="user-res-bt">
                    <input id="regist" type="button" value="注   册">
            </div>
           
        </div>
        
        
        <div id="part_3" style="display:none">
           <div class="res-suc">
               <h1>注册成功拉 可以到<a href="index.jsp">商城首页</a>去逛逛</h1>
               <p>开启<a href="index.jsp">购物</a>之旅</p>
           </div>
        </div>
        
        
    </div>

    <!--底部-->
    <div class="clear"></div>
    <div class="footer footer-register">
        <div class="footer-hd">
            <p>
                <a href="#">爱购集团</a>
                <b>|</b>
                <a href="#">商城首页</a>
                <b>|</b>
                <a href="#">支付宝</a>
                <b>|</b>
                <a href="#">物流</a>
            </p>
        </div>
        <div class="footer-bd">
            <p>
                <a href="#">关于爱购</a>
                <a href="#">合作伙伴</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <em>(c) 2016-2026 iGo.com 版权所有</em>
            </p>
        </div>
    </div>
</body>

</html>